import React, { useEffect, useState } from 'react';
import axios from 'axios'
// 引入样式
import '../../../scss/lhq/requirent.scss'
// 表单
import { Button, Form, Input, Select } from 'antd';
// 日期
import { DatePicker, Space } from 'antd';
// icon
import { SearchOutlined, PlusCircleOutlined, StopOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
// 导入表格
import Mytable from '../Package/Mytable'
// 导入请求
import { useRequirent } from '../../../hooks/lhqHooks/index'
// 导入请求
import { requirent_search, requirent_add, requirent_del, requirent_list } from '../../../tools/lhq/api'
// 对话框组件
import Mymodal from '../Package/Mymodal'
import { useNavigate } from 'react-router-dom';
// 导入骨架屏
import Skeletons from '../../../components/skeleton/Skeletons'

function Requirent(props) {
    // 保存status
    var [status,setStatus] = useState()
    var handlestatus = (status) => {
        setStatus(status)
    }
    useEffect(()=>{
        if(status){
            requirent_list().then((res) => {
                setRequirent(res.data)
            })
        }
    },[status])
    const [date,setDate] = useState()
    // 表格
    const columns = [
        {
            title: '发起日期',
            dataIndex: 'date',
            key: 1,
            align: "center"
        },
        {
            title: '请购单编号',
            dataIndex: 'number',
            key: 2,
            align: "center"
        },
        {
            title: '采购单状态',
            dataIndex: 'status',
            key: 3,
            align: "center"
        },
        {
            title: '请购发起人',
            dataIndex: 'launch',
            key: 4,
            align: "center"
        },
        {
            title: '请购负责人',
            dataIndex: 'response',
            key: 5,
            align: "center"
        },
        {
            title: '请购审核人',
            dataIndex: 'process',
            key: 6,
            align: "center"
        },
        {
            title: '请购单备注',
            dataIndex: 'note',
            key: 7,
            align: "center"
        },
        {
            title: 'Action',
            key: 8,
            render: (_, record) => (
                <>
                    <Button size='small' style={{ backgroundColor: 'lightseagreen', color: '#fff' }} onClick={() => { edit(record) }}><EditOutlined /></Button>
                    <Button size='small' style={{ backgroundColor: 'coral', color: '#fff' }} onClick={() => { del(record) }}><DeleteOutlined /></Button>
                </>
            ),
        },
        {

        }
    ];
    var [requirent, setRequirent] = useRequirent([])
    
    const shoAi = () => {
        axios.get('http://localhost:4000/requirent').then(
            res => {
                setRequirent(res.data)
            }
        )
    }
    // 表单 模糊搜索
    const onFinish = (values) => {
        requirent_search(values.launch).then((res) => {
            setRequirent(res.data)
        })
    };
    // 日期
    const onChange = (date, dateString) => {
        setDate(dateString);
    };

    // 新增
    const [isModalOpen, setIsModalOpen] = useState(false);
    var add = (value) => {
        setIsModalOpen(true);
    }

    var onFinish1 = (values) => {
        setDate(date)
        setIsModalOpen(false);
        // 发请求 新增
        requirent_add({ date: date, status: values.status, launch: values.launch, process: values.process,
            number: values.number, response: values.response, process: values.process,
            note:values.note,key:requirent.length+1}).then((res)=>{
            setRequirent(res.data.list)
            shoAi()
        })
    }

    // 获取单选框
    var handleClick = (selectedRowKeys) => {
        
    }
    // 对话框属性方法 传递
    const data = {
        isModalOpen: isModalOpen,
        form: (
            <Form className='form' initialValues={{ remember: true }} onFinish={onFinish1}
                labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
                <Form.Item className='item' label="发起日期" name="date">
                    <Space direction="vertical">
                        <DatePicker onChange={onChange} />
                    </Space>
                </Form.Item>
                <Form.Item className='item' label="请购单编号" name="number">
                    <Input placeholder='请输入请购单编号' />
                </Form.Item>
                <Form.Item className='item' label="采购单状态" name="status">
                    <Select
                        placeholder="所有"
                        style={{ width: 120 }}
                        options={[
                            { value: '待分配' },
                            { value: '已分配' },
                            { value: '已完成' }
                        ]}
                    />
                </Form.Item>
                <Form.Item className='item' label="请购发起人" name="launch">
                    <Input placeholder='请输入请购发起人' />
                </Form.Item>
                <Form.Item className='item' label="请购负责人" name="response">
                    <Input placeholder='请输入请购负责人' />
                </Form.Item>
                <Form.Item className='item' label="请购审核人" name="process">
                    <Input placeholder='请输入请购审核人' />
                </Form.Item>
                <Form.Item className='item' label="请购单备注" name="note">
                    <Input placeholder='请输入请购单备注' />
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="primary" htmlType="submit" >保存</Button>
                </Form.Item>
            </Form>
        ),
        title: '新增请购单',
    }
    
    // 编辑
    var navigate = useNavigate()
    const edit = (record) => {
        navigate('/index/requirentedit', { state: record })
    }
    // 删除
    const del = (record) => {
        requirent_del(record.id).then((res) => {
            setRequirent(res.data.list)
            shoAi()
        })
    }
    var dataSource = {
        arr:requirent,
        visble:1
    }

    return (
        <div className='requirent'>
            <div className="top">
                <Form className='form' initialValues={{ remember: true }} onFinish={onFinish}>
                    <Form.Item className='item' label="请购单状态" name="status" >
                        <Select
                            placeholder="所有"
                            style={{ width: 120 }}
                            options={[
                                { value: '待分配' },
                                { value: '已分配' },
                                { value: '已完成' }
                            ]}
                        />
                    </Form.Item>
                    <Form.Item className='item' label="创建日期" name="date">
                        <Space direction="vertical">
                            <DatePicker onChange={onChange} />
                        </Space>
                    </Form.Item>
                    <Form.Item className='item' label="请购人" name="launch">
                        <Input placeholder='请输入请购人姓名' />
                    </Form.Item>
                    <Form.Item className='item' label="审核人" name="process">
                        <Input placeholder='请输入审核人姓名' />
                    </Form.Item>

                    <Button className='btn' type="primary" htmlType="submit" icon={<SearchOutlined />} onClick={onFinish}>搜索</Button>
                    <Button className='btn' style={{ backgroundColor: 'coral', color: '#fff' }} icon={< PlusCircleOutlined />} onClick={add}>添加</Button>
                    <Button className='btn' style={{ backgroundColor: 'lightseagreen', color: '#fff' }} icon={<StopOutlined />}>终止</Button>
                </Form>
            </div>
            {/* 表格 */}
            {
                requirent && requirent.length == 0 ?
                <Skeletons /> :
                <Mytable dataSource={dataSource} columns={columns} handleClick={handleClick} 
                handlestatus={handlestatus}/>
            }

            {/* 对话框 */}
            <Mymodal data={data} ></Mymodal>
        </div>
    );
}

export default Requirent;